<template>
  <div class="address w-full h-full">
    <section class="address-search py-20 flex-space-between">
      <div @click="back"> < </div>
      <div>新增地址</div>
      <div></div>
    </section>

    <section>
      <van-contact-card type="add" />
    </section>

    <section>
      <van-contact-card
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          @click="onEdit"
      />
      <van-contact-card
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          @click="onEdit"
      />
      <van-contact-card
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          @click="onEdit"
      />

    </section>




  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },
    }
  },
  methods: {
    onEdit() {
      console.log('编辑')
    },
    back(){
      history.go(-1)
    }
  },


}
</script>

<style lang="less" scoped>
.address{
  background-color: #efefef;
  position: relative;
}
.address-search {
  background-color: #39a9ed;
  display: flex;
  align-items: center;
  height: 50px;
  color: #fff;
  justify-content: space-around;
}
.border-radius{
  border-radius: 5px;
}
.overlay{
  width: 80%;
  height: 200px;
  background-color: #efefefcc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;

}
</style>
